<!-- 佣金排行榜 -->
<template>
  <s-layout title="佣金排行榜">
    <view class="CommissionRank">
      <view class="header">
        <view class="rank" v-if="state.position">
          您目前的排名
          <text class="num">{{ state.position }}</text> 名
        </view>
        <view class="rank" v-else>您目前暂无排名</view>
      </view>
      <view class="wrapper">
        <view class="nav acea-row row-around" style="justify-content: space-around; display: flex">
          <view class="item" :class="state.currentTab === index ? 'font-color' : ''"
                v-for="(item, index) in tabMaps" :key="index" @click="switchTap(index)">
            {{ item }}
          </view>
        </view>
        <view class="list">
          <view class="item acea-row row-between-wrapper" v-for="(item, index) in state.rankList"
                :key="index" style="display: flex;align-items: center;justify-content: space-between;">
            <view class="num" v-if="index <= 2">
              <image :src="'/static/images/medal0' + (index + 1) + '.png'" />
            </view>
            <view class="num" v-else>
              {{ index + 1 }}
            </view>
            <view class="picTxt acea-row row-between-wrapper" style="display: flex;align-items: center;gap: 10rpx;">
              <view class="pictrue">
                <image :src="item.avatar" />
              </view>
              <view class="text line1">{{ item.nickname }}</view>
            </view>
            <view class="people font-color">￥{{ fen2yuan(item.brokeragePrice) }}</view>
          </view>
        </view>
        <view class="noCommodity"
              v-if="state.rankList.length === 0 && (state.page !== 1 || state.active === 0)">
          <emptyPage title="暂无排行～" />
        </view>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
import sheep from '@/sheep';
import {
  onLoad
} from '@dcloudio/uni-app';
import {
  reactive
} from 'vue';
import BrokerageApi from '@/sheep/api/trade/brokerage';
import {
  fen2yuan
} from '@/sheep/hooks/useGoods';

const tabMaps = ['周排行', '月排行'];

const state = reactive({
  currentTab: 0,
  position: 0, // 排名
  rankList: [],
});

async function switchTap(index) {
  state.currentTab = index;
  state.rankList = [];
  calculateTimes();
  getBrokerageRankList();
  getBrokerageRankNumber();
}

async function getBrokerageRankList() {
  const {
    code,
    data
  } = await BrokerageApi.getBrokerageUserChildSummaryPageByPrice({
    pageNo: 1,
    pageSize: 10,
    'times[0]': state.times[0],
    'times[1]': state.times[1],
  });
  if (code !== 0) {
    return;
  }
  state.rankList = data.list;
}

async function getBrokerageRankNumber() {
  const {
    code,
    data
  } = await BrokerageApi.getRankByPrice({
    times: state.times,
  });
  if (code !== 0) {
    return;
  }
  state.position = data;
}

function formatDate(date) {
  return sheep.$helper.timeFormat(date, 'yyyy-mm-dd hh:MM:ss');
}

function calculateTimes() {
  let times;
  if (state.currentTab === 0) {
    times = getWeekTimes();
  } else {
    times = getMonthTimes();
  }
  state.times = [formatDate(times[0]), formatDate(times[1])];
}

onLoad(function() {
  calculateTimes();
  getBrokerageRankList();
  getBrokerageRankNumber();
});

// TODO 芋艿：此处可考虑抽离
/**
 * 获得当前周的开始和结束时间
 */
function getWeekTimes() {
  const today = new Date();
  const dayOfWeek = today.getDay();
  return [
    new Date(today.getFullYear(), today.getMonth(), today.getDate() - dayOfWeek, 0, 0, 0),
    new Date(
        today.getFullYear(),
        today.getMonth(),
        today.getDate() + (6 - dayOfWeek),
        23,
        59,
        59,
    ),
  ];
}

/**
 * 获得当前月的开始和结束时间
 */
function getMonthTimes() {
  const today = new Date();
  const year = today.getFullYear();
  const month = today.getMonth();
  const startDate = new Date(year, month, 1, 0, 0, 0);
  const nextMonth = new Date(year, month + 1, 1);
  const endDate = new Date(nextMonth.getTime() - 1);
  return [startDate, endDate];
}

// TODO 芋艿：css 需要优化下；并且展示样式有问题
</script>
<style lang="scss" scoped>
.CommissionRank .header {
  background: url('') no-repeat;
  width: 100%;
  height: 344rpx;
  background-size: 100% 100%;
}

.CommissionRank .header .rank {
  font-size: 33rpx;
  color: #fff;
  position: absolute;
  top: 160rpx;
  left: 48rpx;
}

.CommissionRank .header .rank .num {
  font-size: 51rpx;
  font-weight: bold;
  margin: 0 10rpx;
}

.CommissionRank .wrapper {
  width: 710rpx;
  background-color: #fff;
  border-radius: 14rpx;
  margin: -76rpx auto 0 auto;
}

.CommissionRank .wrapper .nav {
  height: 99rpx;
  border-bottom: 2.5rpx solid #f3f3f3;
  font-size: 30rpx;
  font-weight: bold;
  color: #999;
  line-height: 99rpx;
}

.CommissionRank .wrapper .nav .item.font-color {
  border-bottom: 4rpx solid #e93323;
  margin-top: -2rpx;
  color: #e93323;
}

.CommissionRank .wrapper .list {
  padding: 0 30rpx;
}

.CommissionRank .wrapper .list .item {
  border-bottom: 1px solid #f3f3f3;
  height: 101rpx;
  font-size: 28rpx;
}

.CommissionRank .wrapper .list .item .num {
  color: #666;
  width: 70rpx;
}

.CommissionRank .wrapper .list .item .num image {
  width: 34rpx;
  height: 40rpx;
  display: block;
}

.CommissionRank .wrapper .list .item .picTxt {
  width: 350rpx;
}

.CommissionRank .wrapper .list .item .picTxt .pictrue {
  width: 68rpx;
  height: 68rpx;
}

.CommissionRank .wrapper .list .item .picTxt .pictrue image {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
}

.CommissionRank .wrapper .list .item .picTxt .text {
  width: 262rpx;
  color: #333;
}

.CommissionRank .wrapper .list .item .people {
  width: 175rpx;
  text-align: right;
}
</style>